<template>
  <eui-page-frame :topHeight="100">
    <template #top>
      <view style='width:auto;'>
        <eui-nav-bar title='库存调整' color='#303133' rightIcon=''/>
      </view>
    </template>
    <eui-page-content>
      <eui-card vPadding="30" hPadding="20" hMargin="0" radius="24">
        <view class="entry-list flex-row-between">
          <view
              class="list-item flex-start-center"
              v-for="(entryItem, entryIndex) in entryList" :key="entryIndex"
              :style="{ background: entryItem.backgroundColor }"
              @click="handleTo(entryItem)"
          >
            <image class="entry-icon" :src="entryItem.iconUrl"></image>
            <view class="title-text">{{ entryItem.title }}</view>
          </view>
        </view>
      </eui-card>
    </eui-page-content>
  </eui-page-frame>
</template>

<script setup lang="ts">
import {onShow} from '@dcloudio/uni-app';
import {ref} from 'vue'
import useService from '@/hooks/useService';
import {storeToRefs} from 'pinia';
import {useThemeStore} from '@/store/themeStore';

const themeStore = useThemeStore(); // 主题
const {theme} = storeToRefs(themeStore);
const themeColor = ref(theme._object.theme == 'theme-blue' ? '#02B7E6' : '#FF6430')
const service = useService({prefix: "apiApi"});

const entryList = ref([{
  title: '商品换货单',
  iconUrl: '../../../static/img/busiImgs/icon_exchange_inventory.png',
  backgroundColor: '#F5FCFF',
  toUrl: '/pages/BusiViews/StockAdjustment/SwapOrder/list'
}, {
  title: '商品报损单',
  iconUrl: '../../../static/img/busiImgs/icon_loss_inventory.png',
  backgroundColor: '#F5FCFF',
  toUrl: '/pages/BusiViews/StockAdjustment/DamageReport/list'
}, {
  title: '商品日期变更单',
  iconUrl: '../../../static/img/busiImgs/icon_date_inventory.png',
  backgroundColor: '#F5FCFF',
  toUrl: '/pages/BusiViews/StockAdjustment/GoodsDateChangeOrder/list'
}]);

const handleTo = (item: any) => {
  uni.navigateTo({
    url: item.toUrl
  });
}
</script>

<style lang="scss" scoped>

.card {
  border-radius: 16rpx;
  margin: 20rpx;
  background-color: #ffffff;
}

.entry-list {
  width: 100%;
  gap: 22rpx;
  flex-wrap: wrap;

  .list-item {
    width: calc((100% - 22rpx) / 2);
    height: 110rpx;
    padding-left: 20rpx;
    border-radius: 16rpx;
    box-sizing: border-box;

    .entry-icon {
      width: 50rpx;
      height: 50rpx;
      margin-right: 20rpx;
    }

    .title-text {
      height: 40rpx;
      font-size: 28rpx;
      text-align: left;
      color: #222222;
      line-height: 40rpx;
    }
  }
}
</style>